<template>
    <div class="body">
      <el-select v-model="student.city" filterable placeholder="柱状图" style="margin-left: 5px;">
        <el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="student.major" filterable placeholder="请选择专业" style="margin-left: 5px;">
        <el-option v-for="item in majors" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="student.enrollmentYear" filterable placeholder="请选择年份" style="margin-left: 5px;">
        <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 5px;" @click="loadPost2()">查询</el-button>
      <div class="box" id="container2">
      </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
// 引入axios
import axios from 'axios'
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Echarts2',
    components: {
    },
    data() {
        return {
            student: {
              name: '',
              city: '',
              major: '',
              enrollmentYear: ''
            },
            citys: [
                {
                    value: '北京',
                    label: '北京'
                }, {
                    value: '上海',
                    label: '上海'
                }, {
                    value: '广州',
                    label: '广州'
                }, {
                    value: '深圳',
                    label: '深圳'
                },
            ],
            majors: [
                {
                    value: '计算机科学',
                    label: '计算机科学'
                }, {
                    value: '物理学',
                    label: '物理学'
                }, {
                    value: '英语文学',
                    label: '英语文学'
                }, {
                    value: '化学工程',
                    label: '化学工程'
                }, {
                    value: '经济学',
                    label: '经济学'
                },

            ],
            years: [
                {
                    value: 2023,
                    label: 2023
                }, {
                    value: 2022,
                    label: 2022
                }, {
                    value: 2021,
                    label: 2021
                }, {
                    value: 2020,
                    label: 2020
                },
            ]
        }
    },
    methods: {
      loadPost2() {
        axios.post('http://127.0.0.1:9090/students/echart1', this.student).then(res => res.data).then(res => {
          // console.log(res)
          this.drawChart2(res)
        })
      },
      drawChart2(data){
        console.log(data)
        //柱状图
        var chartDom2 = document.getElementById('container2');
        // 判断是否已经初始化
        if (echarts.getInstanceByDom(chartDom2)) {
          // 已初始化，销毁实例
          echarts.getInstanceByDom(chartDom2).dispose();
        }
        var myChart2 = echarts.init(chartDom2);
        var option2 = {
          xAxis: {
            type: 'category',
            data: data.name
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: data.data,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        };
        myChart2.setOption(option2);
      },
    },

}
</script>

<style>
.body {
    height: 100vh;
    /* 弹性盒子模型 */
    justify-content: center;
    align-items: center;

}

.box {
    width: 100%;
    height: 600px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>
